<template>
    <div id="scrollableDiv" style="width:620px">
        <div class="columns" style="margin-top: 10px;width:100%">
            <template v-if="pops.count > 0">
                <template v-for="(item,index) in pops.data">
                    <div class="column col-3" v-if="index<pops.count">
                        <div class="-cover" :style="
                        'background-image: url(\''+item.cover+'\');'
                    "></div>
                        <div class="ellipsis-two-lines text-center pt-1"
                             style="color:lightgray;width:calc(100% - 10px);margin-bottom:20px">
                            {{ item.title }}
                        </div>
                    </div>
                </template>
            </template>
            <template v-else>
                <template v-for="(item,index) in pops.data">
                    <div class="column col-4">
                        <div class="-cover" :style="
                        'background-image: url(\''+item.cover+'\');'
                    "></div>
                        <div class="ellipsis-two-lines text-center pt-1"
                             style="color:lightgray;width:calc(100% - 10px);margin-bottom:20px">
                            {{ item.title }}
                        </div>
                    </div>
                </template>
            </template>
        </div>
    </div>
</template>

<script setup>
    import {defineProps, nextTick, onMounted, ref, watch} from 'vue'

    const pops = defineProps({
        data: Array,
        count: Number,
    })

    const scrollInterval = ref(0)

    const autoScroll = (element, speed) => {
        scrollInterval.value = setInterval(() => {
            element.scrollTop = element.scrollTop + 1;
            if (element.scrollTop >= element.scrollHeight - element.clientHeight) {
                element.scrollTop = 0;
            }
        }, speed);
    }

    const stopScroll = () => {
        clearInterval(scrollInterval.value);
    }

    onMounted(() => {
        // let scrollableDiv = document.getElementById('scrollableDiv');
        // autoScroll(scrollableDiv, 50); // 调整滚动速度，单位为毫秒
    })

    watch(
        () => pops.data,
        (n, o) => {
            stopScroll();
            nextTick(() => {
                let scrollableDiv = document.getElementById('scrollableDiv');
                autoScroll(scrollableDiv, 50); // 调整滚动速度，单位为毫秒
            });
        },
        {deep: true}
    )
</script>

<style scoped>
#scrollableDiv {
    height: 480px;
    /*
    overflow-y: scroll;
     */
    margin-top: 5px;
}

.ellipsis-two-lines {
    display: -webkit-box; /* Use webkit-specific box model */
    -webkit-line-clamp: 2; /* Limit the number of lines to two */
    -webkit-box-orient: vertical; /* Orient the text vertically */
    overflow: hidden; /* Hide overflowing content */
    text-overflow: ellipsis; /* Add ellipsis for overflowed text */
}

.-cover {
    width: calc(100% - 25px);
    height: 95px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
</style>